<template>
  <div class="tmpl clearfix">
    <h5>&lt;歌手热搜榜&gt;</h5>
    <div class="musicbox" v-for="(val,index,key) in listData">
      <img :src="val.picUrl">
      <p>{{val.name}}</p>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        listID:['8325','6452','2116','3684','8327','8328','6453','6652','9548','8926','10204','2849','7652','3702','4592','5538','12437','8326'],//歌手id
        listData:[]//请求回来的数据
      }
    },
    methods:{
      getData(){
        let url;
        //循环遍历请求id
        this.listID.forEach(val=>{
          //请求数据
          url = 'https://api.imjad.cn/cloudmusic/?type=artist&id='+val;
          this.$http.get(url).then(res=>{
            //循环添加进数组
            console.log(res.body.artist);
            this.listData.push(res.body.artist);
          })
        });
      }
    },
    created(){
      this.getData();
    }
  }
</script>
<style scoped>
  .tmpl{
    text-align: center;
  }
  .tmpl h5{
    color: brown;
  }
  .musicbox{
    height: 120px;
    width: 33.33%;
    float: left;
    text-align: center;
    margin: 15px 0;
  }
  .musicbox img{
    height: 75%;
    width: 70%;
  }
</style>
